<template>
    <div class="app-container">
        <!-- 输入表单 -->
        <el-form label-width="120px">
                            <el-form-item label="name">
                    <el-input v-model="memberInformation.name" />
                </el-form-item>
                <el-form-item label="mobile">
                    <el-input v-model="memberInformation.mobile" />
                </el-form-item>
                <el-form-item label="sex">
                    <el-input v-model="memberInformation.sex" />
                </el-form-item>
                <el-form-item label="headPic">
                    <el-input v-model="memberInformation.headPic" />
                </el-form-item>
            <el-form-item>
                <el-button
                        :disabled="saveBtnDisabled"
                        type="primary"
                        @click="saveOrUpdate()"
                >
                    保存
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import memberInformationApi from '@/api/MemberInformation'
    export default {
        data() {
            return {
                memberInformation: {}, // 初始化数据
                saveBtnDisabled: false // 保存按钮是否禁用，防止表单重复提交
            }
        },
        //页面渲染成功
        created() {
            if (this.$route.params.id) {
                this.fetchDataById(this.$route.params.id)
            }
        },
        methods: {
            saveOrUpdate() {
                // 禁用保存按钮
                this.saveBtnDisabled = true
                if (!this.memberInformation.id) {
                    this.saveData()
                } else {
                    this.updateData()
                }
            },
            // 新增数据
            saveData() {
                // debugger
                memberInformationApi.save(this.memberInformation).then(response => {
                    this.$message({
                        type: 'success',
                        message: response.message
                    })
                    this.$router.push('/MemberInformation/list')
                })
            },
            // 根据id查询记录
            fetchDataById(id) {
                memberInformationApi.getById(id).then(response => {
                    this.memberInformation = response.data.record
                })
            },
            // 根据id更新记录
            updateData() {
                // 数据的获取
                memberInformationApi.updateById(this.memberInformation).then(response => {
                    this.$message({
                        type: 'success',
                        message: response.message
                    })
                    this.$router.push('/MemberInformation/list')
                })
            }
        }
    }
</script>
